<template>
	<view class="">这是demo1</view>
	<view class="">
		<navigator url="/pages/demo2/demo2">跳转到demo2</navigator>
	</view>
	<view class="">姓名：张三</view>
	<view class="">{{ 1 + 1 }}</view>
	<view class="">{{ a }}</view>
	<view class="">{{ Date.now() }}</view>
	<view class="">{{ Math.random() }}</view>
	<view class="">{{ 1 == 1 ? "zhangsan" : "lisi" }}</view>
	<view class="">{{ fn() }}</view>
	<view class="">{{ num }}</view>
	<view class="">{{ user.name }} - {{ user.age }}</view>
	<view class="">
		<image :src="picUrl" mode=""></image>
	</view>
	<view class="">
		<button type="primary" loading>按钮</button>
	</view>
	<view>
		<view class="box" :class="isActive ? 'active' : ''">占位</view>
		<view class="box" :style="{ fontSize: size + 'px' }">内联</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	const a = 6;

	function fn() {
		return "vue3学习";
	}
	let num = ref(10);

	// setInterval(()=> {
	// num.value++;
	// console.log(num.value);
	// }, 3000);

	let user = ref({
		name: "张三",
		age: 18,
	});
	user.value.name = "李四";

	const imgArr = ref([
		"../../static/pic1.jpeg",
		"../../static/pic2.jpeg",
		"../../static/pic3.jpeg",
		"../../static/pic4.jpeg",
	]);
	const picUrl = ref("../../static/pic1.jpeg");
	let i = 0;
	// setInterval(() => {
	// 	i++;
	// 	picUrl.value = imgArr.value[i % 4];
	// }, 1000);

	const isActive = ref(true);
	const size = ref(20);
	// setInterval(() => {
	// 	i++;
	// 	size.value += i;
	// 	isActive.value = !isActive.value;
	// }, 1000);
</script>

<style lang="scss" scoped>
	.box {
		width: 100px;
		height: 100px;
		background-color: orange;
	}

	.active {
		background-color: green;
	}
</style>